<template>
    <u-popup :show="showPopup" :closeOnClickOverlay="true" title="选择机台" @close="onSelectMachinePopup">
        <view class="jk-popup-head">
            <view class="jk-popup-head-item" @click="onSelectMachinePopup">关闭</view>
            <view class="jk-popup-head-item jk-popup-head-title">选择机台</view>
            <view class="jk-popup-head-item jk-popup-head-item-confirm">
                <view @click="onConfirmSelectMachineBtn">确定</view>
            </view>
        </view>
        <view class="jk-popup-content">
            <view class="margin-bottom-20">
                <u-search placeholder="设备编号" :clearabled="false" :height="38" @clear="onClearBtnOfSelectMachinePopup" @custom="onSearchBtnOfSelectMachinePopup" @search="onSearchBtnOfSelectMachinePopup" v-model="searchParams.machineCode"></u-search>
            </view>
            <view class="legend-container">
                <view
                    v-for="(item, index) in legendList"
                    :key="index"
                    class="legend-item"
                >
                    <view :style="{ background: item.bgColor }" class="legend-item-icon"></view>
                    <view>{{ item.text }}</view>
                </view>
            </view>
            <u-checkbox-group v-model="selectMachineArr" size="21" placement="row" iconPlacement="right">
                <view class="checkbox-machine-container">
                    <view
                        v-for="item in machineList"
                        :key="item.id"
                        class="check-machine-item"
                    >
                        <view class="check-machine-item-inner" :style="{background: setBgColor(item)}">
                            <u-checkbox
                                labelSize="16"
                                iconSize="20"
                                size="18"
                                labelColor="#fff"
                                :borderBottom="true"
                                :disabled="selectedData.some(x => x.machineCode === item.code)"
                                :customStyle="{
                                height: '36px'
                            }"
                                :label="item.code"
                                :name="item.id"
                            ></u-checkbox>
                        </view>
                    </view>
                </view>
            </u-checkbox-group>
            <view class="margin-top-20">
                <u-button @click="onConfirmSelectMachineBtn" type="primary" size="large">确认{{ selectMachineArr.length ? `(${selectMachineArr.length}台)` : '' }}</u-button>
            </view>
        </view>
    </u-popup>
</template>
<script>
    import {machineManagerMachinePage} from "../../../../api";
    import {tipBar} from "../../../../utils/jk-utils";

    export default {
        props: {
            show: {
                type: Boolean,
                default: false
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            selectedData: { // 已选的禁止勾选
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                selectMachineArr: [],
                showPopup: false,
                machineList: [],
                legendList: [
                    { count: 0, text: '0人', bgColor: '#c5c8ce' },
                    { count: 1, text: '1人', bgColor: '#19be6b' },
                    { count: 2, text: '2人', bgColor: '#2d8cf0' },
                    { count: 3, text: '3人', bgColor: '#ff9900' },
                    { count: 4, text: '4人及以上', bgColor: '#ed4014' },
                ],
                searchParams: {
                    scheduleShiftId: '',
                    machineCode: '',
                    workshopId: ''
                },
            };
        },
        methods: {
            onClearBtnOfSelectMachinePopup() {
                this.$set(this.searchParams, 'machineCode', '');
                this.getMachineListRequest();
            },
            setBgColor(item) {
                let color = '';
                if (!item.scheduleEmpCount) {
                    color = this.legendList.find(x => x.count === 0).bgColor;
                } else if (item.scheduleEmpCount > 3) {
                    color = this.legendList.find(x => x.count === 4).bgColor;
                } else {
                    color = this.legendList.find(x => x.count === item.scheduleEmpCount).bgColor;
                }
                return color;
            },
            onSearchBtnOfSelectMachinePopup() {
                this.getMachineListRequest();
            },
            getMachineListRequest() {
                this.selectMachineArr = [];
                this.machineList = [];
                return machineManagerMachinePage({
                    scheduleShiftId: this.searchParams.scheduleShiftId,
                    workshopId: this.searchParams.workshopId,
                    nameOrCode: this.searchParams.machineCode,
                    pageNo: 1,
                    pageSize: 1000
                }).then(res => {
                    if (res.data.status === 200) {
                        this.machineList = res.data.res;
                    }
                });
            },
            onSelectMachinePopup() {
                this.$set(this.searchParams, 'machineCode', '');
                this.selectMachineArr = [];
                this.$emit('close', false);
            },
            onConfirmSelectMachineBtn() {
                let arr = this.machineList.filter(x => this.selectMachineArr.includes(x.id));
                if (arr && arr.length) {
                    this.$emit('confirm', arr);
                } else {
                    tipBar('none');
                }
            }
        },
        watch: {
            show(newVal) {
                this.showPopup = newVal;
                if (newVal) {
                    this.$set(this.searchParams, 'scheduleShiftId', this.formData.scheduleShiftId);
                    this.$set(this.searchParams, 'workshopId', this.formData.workshopId);
                    this.getMachineListRequest();
                }
            },
        }
    }
</script>
<style scoped lang="scss">
$legend_icon_height: 30rpx;
.jk-popup-head {
    height: 88rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    border-bottom: solid 1rpx #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .jk-popup-head-item-confirm {
        text-align: right;
    }
    .jk-popup-head-item {
        font-size: 28rpx;
        width: calc(100% / 3);
    }
    .jk-popup-head-title {
        height: 100%;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.jk-popup-content {
    padding: 0 32rpx 32rpx 32rpx;
    .legend-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
        .legend-item {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            margin: 0 10rpx;
            .legend-item-icon {
                width: 50rpx;
                height: 30rpx;
                margin-right: 6rpx;
                border-radius: 6rpx;
            }
        }
    }
    .checkbox-machine-container {
        width: 100%;
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        .check-machine-item {
            width: calc(100% / 3);
            padding: 4rpx;
            box-sizing: border-box;
            .check-machine-item-inner {
                color: #fff;
                padding: 0 16rpx;
                border-radius: 8rpx;
            }
        }
    }
}
</style>
